Summary

• Artifact demo example (examples/openui-artifact-demo/) — Full Next.js app demonstrating the OpenUI artifact system for displaying AI-generated code in a resizable side panel
• defineArtifact() API (packages/react-ui/src/artifact/) — New first-class function that eliminates artifact component boilerplate by auto-wiring useId, useArtifact, and ArtifactPanel
• ArtifactMeta metadata on DefinedComponent in lang-core — Enables prompt generation to annotate artifact components and framework introspection

Changes

New: defineArtifact() API (react-ui)

Consumers provide just preview and panel render functions — no manual ID generation, hook wiring, or ArtifactPanel composition:

import { defineArtifact } from "@openuidev/react-ui"

export const ArtifactCodeBlock = defineArtifact({
  name: "ArtifactCodeBlock",
  props: ArtifactCodeBlockSchema,
  description: "Code block that opens in the artifact side panel",
  title: (props) => props.title,
  preview: (props, { open, isActive }) => (
    <InlinePreview title={props.title} onOpen={open} isActive={isActive} />
  ),
  panel: (props) => (
    <ArtifactView language={props.language} codeString={props.codeString} />
  ),
})

Package changes

• lang-core: Add ArtifactMeta type, optional artifact? field on DefinedComponent, [artifact] tag in prompt generation
• react-lang: Pass through artifact field in defineComponent, re-export ArtifactMeta
• react-ui: New defineArtifact() function with ArtifactControls injection, exported from @openuidev/react-ui

Artifact demo example

• Custom ArtifactCodeBlock component with inline preview card + full syntax-highlighted panel view
• Extended library building on openuiChatLibrary
• Artifact-aware system prompt
• Code-focused conversation starters (React, Python, CSS, SQL)
• Migrated to use defineArtifact() API

Test plan

• pnpm build passes across all packages
• Existing tests pass (pnpm test in lang-core, react-headless)
• Artifact demo: inline preview renders, click opens panel, close works, multiple artifacts coexist
• pnpm generate:prompt produces correct system prompt with [artifact] tag

🤖 Generated with Claude Code